import { Component, OnInit,Input ,SimpleChanges,ElementRef,ViewChild} from '@angular/core';

@Component({
  selector: 'el-row',
  templateUrl: './el-row.component.html',
  styleUrls: ['./row.css','./el-row.component.css']
})
export class ElRowComponent implements OnInit {


    @Input() gutter:Number=0;
    @Input() mg:Number=0;
    @Input() type:String;
    @Input() justify:String='start';
    @Input() align:String='top';
    
    @ViewChild('self') self:ElementRef

    //computed
   
    constructor() { }

    ngOnInit() {
        // console.log('type is ',this.type);
        // console.log(this.self.nativeElement);
        this.setClass()
    }

    ngOnChanges(changes:SimpleChanges){
        // console.log(changes)
        if(changes['gutter']){
            var pd=changes['gutter'].currentValue/2+'px';
            // this.style.marginRight=this.style.marginLeft;
            this.self.nativeElement.style.paddingLeft=pd
            this.self.nativeElement.style.paddingRight=pd
        }
        
    }

    setClass(){
        var classList=['el-row',
                        this.justify!=='start'?`is-justify-${this.justify}`:'',
                        this.align !== 'top' ? `is-align-${this.align}` : '',
                        this.type === 'flex'?'el-row--flex':'']
        this.self.nativeElement.className=classList.join(' ')
    }

}
